window.addEventListener("load", function () {
	// 模拟服务器上的传递过来的数据
	let apiTypeData = [
		{ name: "全部", keyword: "身份证实名", isnew: false },
		{ name: "生活服务", keyword: "银行卡", isnew: false },
		{ name: "金融科技", keyword: "短信", isnew: false },
		{ name: "交通地理", keyword: "天气", isnew: false },
		{ name: "充值缴费", keyword: "短信", isnew: false },
		{ name: "数据智能", keyword: "手机归属地", isnew: false },
		{ name: "企业工商", keyword: "IP", isnew: false },
		{ name: "应用开发", keyword: "手机归属地", isnew: false },
		{ name: "电子商务", keyword: "IP", isnew: false },
		{ name: "吃喝玩乐", keyword: "视频", isnew: false },
		{ name: "文娱视频", keyword: "视频", isnew: false },
		{ name: "免费接口大全", keyword: "短信", isnew: true },
		{ name: "短信", keyword: "身份证实名", isnew: false },
		{ name: "汽车", keyword: "银行卡", isnew: false },
		{ name: "核验", keyword: "银行卡", isnew: false },
		{ name: "最新发布", keyword: "银行卡", isnew: true },
		{ name: "API私有化部署", keyword: "身份证实名", isnew: true },
	];

	// console.log(apiTypeData);
	let html = "";
	apiTypeData.forEach(function (v, i) {
		if (i === 0) {
			html += `<li class= "active" title='${v.keyword}'>${v.name}</li>`;
		} else if (v.isnew) {
			html += `<li class= "fw-bold" title='${v.keyword}'>${v.name}</li>`;
		} else {
			html += `<li title='${v.keyword}'>${v.name}</li>`;
		}
	});
	$("#apiCatList").innerHTML = html;

	//API分类区点击后增加激活样式
	$("#apiCatList li").forEach(function (v) {
		v.addEventListener("click", function () {
			$("#apiCatList li").forEach(function (item) {
				item.classList.remove("active");
			});
			this.classList.add("active");

			// 功能三:点击API分类区,联动下方的搜索框
			// 1.将this的textContent赋值给strong
			$("#apiBt strong").textContent = this.textContent;
			// 2.将this的title属性赋值给搜索框的value
			$("#apiBt input").value = this.title;
		});
	});

	//API列表区域 模拟服务器返回的数据
	let listDataArr = [
		//第一行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},

		//第二行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第三行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第四行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
	];
	//功能4:卡片区动态渲染
	let cardsHtml = "";
	listDataArr.forEach(function (v) {
		console.log(v);
		cardsHtml += ` 
        <li>
        <img src="../imgs/${v.img}" alt="图片已损坏">
          <p>${v.name}</p>
          <p class=${v.isSpecial ? "fc-red" : "fc-green"}>${v.price}</p>
          ${v.isSpecial ? '<span class="abs">企业认证</span>' : ""}        
          <a href="#" class="abs">申请数据 </a>
         </li>
          `;
	});
	$("#apiCardsList").innerHTML = cardsHtml;

	// 给分页添加激活效果
	$("#page ul li").forEach(function(v,i){
		v.addEventListener("click",function(){
			$("#page ul li").forEach(function(item){
				item.classList.remove("active")
			})
			v.classList.add("active");
			})
		})
		//点击申请数据弹出蒙层
		$("#apiCardsList").addEventListener("click",function(e){
			if (e.target.localName === 'a'){
				$("#mask").style.display = "block";
				document.body.style.overflow = "hidden";
			}
		})
		// 点击蒙层和登录框关闭该界面
		$("#mask").addEventListener("click",function(){
			$("#mask").style.display = "none";
			document.body.style.overflow = "auto";
		})
		// 点击时,只关闭蒙层,不关闭登录框
		$("#loginModal").addEventListener("click",function(e){
			e.stopPropagation();
		})
		// 功能二:点击模态框中的Tab按钮,对应按钮要激活,显示对应的form表单
		$("#loginModal form")[0].style.display = "block"
		$("#loginModalTab a").forEach(function(v,i){
			v.addEventListener("click",function(){
				$("#loginModalTab a").forEach(function(item){
					item.classList.remove("active")
				})
				v.classList.add("active")
				$("#loginModal form").forEach(function(each){
					each.style.display = "none"
				})
				$("#loginModal form")[i].style.display = 'block';
			})
		})
/* 		$("#loginModalTab a").forEach(function(v,i){
			v.addEventListener("click",function(){
				$("#loginModalTab a").forEach(function(item){
					item.classList.remove("active");
					
				})
				v.classList.add("active");

				$("#loginModal form").forEach(function(each){
					each.style.display = "none"
				})
				$("#loginModal form")[i].style.display = "block"
			})

		}) */

});

